{% extends 'iframe/base.html.twig' %}
{% block body %}
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    添加
                    <a href="/Admin/File/index" class="layui-btn layui-btn-sm dry-right">列表</a>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <dry-common role="select" label="分类" name="category" value="" url="/Api/FileCategory/getList"></dry-common>
                        <div class="layui-form-item">
                            <label class="layui-form-label">文件</label>
                            <div class="layui-input-block">
                                <input type="hidden" id="fileId">
                                <div class="layui-card dry-skin-green">
                                    <div class="layui-card-header layui-unselect dry-fold pointer">上传面板</div>
                                    <div class="layui-card-body">
                                        <div class="layui-fluid" style="padding-left:0;">
                                            <div class="layui-row layui-col-space5">
                                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg4">
                                                    <div class="layui-upload-drag" id="upload">
                                                        <i class="layui-icon layui-icon-upload-drag"></i>
                                                        <p>点击选择文件或将文件拖拽到此处</p>
                                                    </div>
                                                </div>
                                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg4">
                                                    <div>
                                                        <span class="dry-radio-text">图片压缩&nbsp;&nbsp;&nbsp;</span>
                                                        <input type="radio" name="compress" lay-filter="compress" value="1" title="压缩" checked="">
                                                        <input type="radio" name="compress" lay-filter="compress" value="0" title="不压缩">
                                                    </div>
                                                    <div>
                                                        <span class="dry-radio-text">文件命名规则&nbsp;&nbsp;&nbsp;</span>
                                                        <input type="radio" name="nameRule" lay-filter="nameRule" value="rand" title="随机命名" checked="">
                                                        <input type="radio" name="nameRule" lay-filter="nameRule" value="raw" title="原始命名">
                                                    </div>
                                                    <div id="uploadBox"><button type="button" class="layui-btn" id="uploadButton">立即上传</button></div>
                                                </div>
                                            </div>
                                        </div>
                                        <table class="layui-table">
                                            <thead>
                                            <tr>
                                                <th>预览</th>
                                                <th>宽度</th>
                                                <th>高度</th>
                                                <th>大小</th>
                                                <th>文件名</th>
                                                <th>名称</th>
                                                <th>进度</th>
                                                <th>速度</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="uploadTbody"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <a href="javascript:void(0);" class="layui-btn" id="submit">确定</a>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/compressor.js"></script>
<script>
layui.use(['uploadV2', 'form', 'element', 'laytpl', 'jquery', 'dry', 'file'], function(upload, form, element, laytpl, jquery, dry, fileModule){
    $ = jquery;
    /**/
    var nameRule = "rand";
    var isCompress = 1;
    var instance = upload.render({
        elem: '#upload',
        bindAction: '#uploadButton',
        url: '',
        multiple: true,
        auto: false,
        accept: "file",
        xhr: fileModule.xhrOnProgress,
        progress: function(index, event){fileModule.progress(instance, index, event);},
        setNameRule: setNameRule,
        compress: compress,
        temp: {"rate": {}, "ossConfig": {}},
        data: {},
        before: function(){fileModule.before('/Admin/File/getUploadData', instance);},
        choose: function(object){
            /*获取oss上传需要的数据*/
            this.before();
            var files = this.files = object.pushFile();
            object.preview(function(index, file, result){
                /**/
                var sizeInfo = fileModule.getFileSize(file.size);
                file.sizeText = sizeInfo.value + " " + sizeInfo.unit;
                var prefix = fileModule.getPrefix(file);
                var url = fileModule.getPoster(file);
                if(prefix == "video"){
                    fileModule.bodyAddVideo(index, file);
                }
                var playUrl = window.URL.createObjectURL(file);
                var renderData = {
                    index: index,
                    file: file,
                    name: fileModule.getBaseName(file.name),
                    result: result,
                    url: url,
                    prefix: prefix,
                    playUrl: playUrl
                };
                var string = laytpl(fileModule.tr).render(renderData);
                var tr = $(string);
                tr.find('.upload-reupload-button').on('click', function(){
                    object.upload(index, file);
                });
                tr.find('.upload-delete-button').on('click', function(){
                    delete files[index];
                    tr.remove();
                    instance.config.elem.next()[0].value = '';
                });
                $("#uploadTbody").append(tr);
                fileModule.setImageShow("imageShowBox-" + index, true);
                /*图片宽高问题*/
                fileModule.setImageWidthHeight(file, function(width, height){
                    tr.find("td.width").html(width);
                    tr.find("td.height").html(height);
                    tr.find("div.playInfo").attr("width", width);
                    tr.find("div.playInfo").attr("height", height);
                });
                /*进度条问题*/
                element.render('progress', 'f-' + index);
                /*视频尺寸*/
                if(prefix == "video"){
                    var v = $$("v" + index);
                    v.addEventListener("resize", function(){
                        tr.find("td.width").html(v.videoWidth);
                        tr.find("td.height").html(v.videoHeight);
                        tr.find("div.playInfo").attr("width", v.videoWidth);
                        tr.find("div.playInfo").attr("height", v.videoHeight);
                    }, false);
                }
                /**/
            });
        },
        done: function(response, index, upload){
            if(response.code == 0){
                fileModule.done(response, index);
                return delete this.files[index];
            }
            this.error(index, upload);
        },
        error: function(index, upload){fileModule.error(index);}
    });
    /**/
    function setNameRule(index, file)
    {
        fileModule.setNameRule(instance, nameRule, index, file);
    }
    /**/
    function compress(oldFile, compressSuccess)
    {
        fileModule.compress(isCompress, oldFile, compressSuccess);
    }
    /**/
    form.on("radio(nameRule)", function(data){
        nameRule = data.value;
    });
    form.on("radio(compress)", function(data){
        isCompress = parseInt(data.value);
    });
    /**/
    fileModule.doPlay();
    fileModule.submit();
    dry.fold();
});
</script>
{% endblock %}